<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/vue.js"></script>

</head>
<body>

<div id="app" >
    <!--得在子组件绑定父组件的数据，然后在子组件里面用props接收-->
    <my-child  :msg2="msg"></my-child>
    <hr>
    {{msg.a}}

</div>

<template id="child">
    <div>
        <h2>{{msg2.a}}</h2>
        <input type="button" value="更改" @click="change">
    </div>
</template>

<script>
    new Vue({
//        el:'#app',
        data:{
            msg:{
                a:'我是父组件的值'
            }
        },
        components:{'my-child':{
            props:['msg2'],
            template:'#child',
            methods:{
                change(){
                    this.msg2.a ='被更改了'
                }
            }
        }
        }
    }).$mount('#app')
</script>

</body>
</html>